<template>
	<view class="tab_bar" :style="{'--width': width + 'rpx', '--color': mainStore.color}">
		<view class="main d-flex">
			<view class="flex-1 flexac f-column" @click="tabClick(item)" v-for="(item,index) in list" :key="index">
				<image class="icon" :src="staticImg + (currentPath == item.path ? item.activeIcon : item.inactiveIcon)"></image>
				<view class="size24 color-666" :class="{'active': currentPath == item.path}">{{ item.name }}</view>
			</view>
		</view>
	</view>
	<view class="placeholder"></view>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	import { staticImg } from '@/utils/config.js'
	import { useMainStore } from '@/stores/index'
	const mainStore = useMainStore()
	const props = defineProps({
		source: {
			type: String,
			default: 'home'
		},
		width: {
			type: String,
			default: '52'
		}
	})
	
	const list = computed(() => {
		if(props.source == 'home') {
			return [
				{ name: '首页', inactiveIcon: 'sy01.png', activeIcon: 'sy02.png', path: '/bizPage/index/index' },
				{ name: '文档管理', inactiveIcon: 'wdgl01.png', activeIcon: 'wdgl02.png', path: '/bizPage/docs/manage' },
				{ name: '我的', inactiveIcon: 'wd01.png', activeIcon: 'wd02.png', path: '/bizPage/user/index' }
			]
		} else if(props.source == 'clockIn') {
			return [
				{ name: '打卡', inactiveIcon: 'dk01.png', activeIcon: 'dk02.png', path: '/bizPage/personnel/clockIn' },
				{ name: '统计', inactiveIcon: 'tj01.png', activeIcon: 'tj02.png', path: '/bizPage/personnel/statistics' }
			]
		}
	})
	const currentPath = ref('')
	
	onMounted(() => {
		let pages = getCurrentPages()
		let page = pages[pages.length - 1]
		currentPath.value = page.$page.fullPath
	})
	
	const tabClick = (item) => {
		if(currentPath.value == item.path) return
		uni.redirectTo({
			url: item.path
		})
	}
</script>

<style lang="scss" scoped>
	.tab_bar {
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.main {
		height: 100rpx;
		border-top: 1rpx solid #dadbde;
		.icon {
			width: var(--width);
			height: var(--width);
		}
		.active {
			color: var(--color);
		}
	}
	.placeholder {
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
	}
</style>
